<template>
	<div class="page">
		<div class="page-header">
			<img v-if="bannerImage" class="page-header__banner" :src="bannerImage" alt="banner">
			<img v-else class="page-header__banner" src="~@/assets/images/school-banner.png" alt="banner">
			<div class="page-header__bd">
				<el-row type="flex">
					<img class="school-logo" v-if="school.logo" :src="school.logo">
					<div style="flex: 1;">
						<div class="">
							<h1 class="page-name">{{ infos.schoolName }}</h1>
							<span class="school-tag" @click="schoolHref()">院校官网</span>
							<span class="school-tag" @click="recruitHref()">招生章程</span>
						</div>
						<el-row type="flex" style="margin-top: 23px;">
							<div style="flex: 1;">
								<div v-for="item in collegeLevel2Array" class="detail-tag">
									<span>{{ item.label }}</span>
								</div>
							</div>
							<el-row type="flex" align="middle" style="flex-shrink: 0; margin-bottom: 18px">
								<span @click="toggleCollectStatus" class="collect">
									<i style="font-size: 28px;" :class="`collect-icon el-icon-star-${collect.isCollect ? 'on' : 'off'}`"></i>
									<span class="collect-text">收藏</span>
								</span>
								<el-dropdown trigger="click">
									<el-button class="modify-button" type="primary">
										<span style="margin-right: 10px;">收藏列表</span>
										<i class="el-icon-caret-bottom"></i>
									</el-button>
									<el-dropdown-menu class="modify-dropdown" slot="dropdown">
										<el-dropdown-item v-for="item in collect.list" :key="item.id">
											<el-row type="flex" align="middle" style="min-width: 89px;">
												<span @click="goDetails(item)" style="flex: 1; margin-right: 10px;">{{ item.name }}</span>
												<i @click.stop="onCancelCollectItem(item)" style="flex-shrink: 0; line-height: 1;" class="el-icon-delete"></i>
											</el-row>
										</el-dropdown-item>
										<el-dropdown-item v-if="collect.list.length === 0">暂无数据</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<el-button @click="goSchoolDiff" style="margin-left: 18px;" class="modify-button" type="primary">院校对比</el-button>
							</el-row>
						</el-row>
						<span class="school-address">{{ school.schoolAddress }}</span>
					</div>
				</el-row>

			</div>
		</div>
		<div class="page-bd">
      <el-tabs class="ui-tabs" v-model="tabs.active" style="flex: 1; min-width: 0;">
        <el-tab-pane v-for="item in tabs.list" :key="item.id" :label="item.label" :name="item.prop">
					<div v-html="school[item.prop]" class="article-content"></div>
        </el-tab-pane>
      </el-tabs>


			<!-- <div class="ui-title">
				<div class="ui-title__icon"></div>
				<div class="ui-title__name">师资力量与学科建设</div>
			</div>
			<div v-html="school.teachers" class="ui-article"></div>
			<div class="ui-title">
				<div class="ui-title__icon"></div>
				<div class="ui-title__name">就业升学</div>
			</div>
			<div v-html="school.employment" class="ui-article"></div>
			<div class="ui-title">
				<div class="ui-title__icon"></div>
				<div class="ui-title__name">校内选拔、转专业、辅修学位</div>
			</div>
			<div v-html="school.selection" class="ui-article"></div> -->
		</div>
	</div>
</template>

<script>
import { request } from "@/util/request.js"
export default {
	components: {},
	data() {
		return {
			bannerImage: null,
			tabs: {
				list: [
					{ label: '院校介绍', prop: 'introduce' },
					{ label: '历史沿革', prop: 'history' },
					{ label: '师资力量', prop: 'teachers' },
					{ label: '学科建设', prop: 'subjects' },
					{ label: '教学管理', prop: 'selection' },
					{ label: '教学设施', prop: 'facilities' },
					{ label: '就业升学', prop: 'jobStudy' },
				],
				active: 'introduce',
			},
			details: [],
			father: [],
			score: [],
			category: [],
			id: '',
			infos: {},
			school:{},

			collect: {
				list: [],
				isCollect: false,
			},
		}
	},
	created() {
		this.infos = this.$route.params.info
		this.infos = JSON.parse(localStorage.getItem('infos'))
		document.title=this.infos.schoolName+"介绍"
		this.getBanner()
		this.getSchoolIntroduction()
		this.getCollectList()
	},
	computed: {
		collegeLevel2Array() {

			if (!this.school.collegeLevel) return []
			let ids = this.school.collegeLevel.split(',')
			// 院校层级
			return this.$constants.schoolCollegeLevel.filter(item => ids.includes(item.value) > 0)
		}
	},
	methods: {
		getBanner() {
			this.$api.queryBanner({ type: this.$constants.bannerTypes.school }).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				if (res.data[0]) {
					this.bannerImage = res.data[0].image
				}
			})
		},
		getSchoolIntroduction() {
			request({
				method: 'get',
				url: 'SchoolIntroduction/getSchoolDetail',
				params:{
					code: this.infos.code
				}
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				this.school = res.data;
				document.title = res.data.schoolName + "介绍"
				this.getCollectListStatus()
			})
		},
		schoolHref(){
			if(this.school.schoolHref === '' || this.school.schoolHref == null){
				this.$message({
						message: '未配置官网地址',
						type: 'error'
				});
			}else{
					window.open(this.school.schoolHref, '_blank');
			}
		},
		recruitHref(){
			if(this.school.recruitHref === '' || this.school.recruitHref == null){
				this.$message({
					message: '未配置招生章程地址',
					type: 'error'
				});
			}else{
				window.open(this.school.recruitHref, '_blank');
			}
		},

		toggleCollectStatus() {
			if (this.collect.isCollect) {
				this.$store.dispatch('setCollectStatus', {
					action: 'cancel',
					params: [
						{ code: this.school.schoolCode, type: 1, }
					]
				}).then(res => {
					this.collect.isCollect = false
					this.getCollectList()
				})
			} else {
				this.$store.dispatch('setCollectStatus', {
					action: 'add',
					type: 1,
					code: this.school.schoolCode,
					name: this.school.schoolName
				}).then(res => {
					this.collect.isCollect = true
					this.getCollectList()
				})
			}
		},

		getCollectList() {
			this.$api.getCollectList({
				pageNum: 1,
				pageSize: 500,
				type: 1, // 收藏类型 1:学校 2:专业
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				this.collect.list = res.data.list
			})
		},

		getCollectListStatus() {
			let userInfo = this.$store.getters.userInfo
			this.$api.isCollect({
				userId: userInfo.userId,
				code: this.school.schoolCode,
				type: 1, // 收藏类型 1:学校 2:专业
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				this.collect.isCollect = res.data
			})
		},

		onCancelCollectItem(item) {
			this.$confirm(`确定删除该收藏？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				return this.$store.dispatch('setCollectStatus', {
					action: 'cancel',
					params: [
						{ code: item.code, type: 1, }
					]
				})
			}).then(res => {
				if (item.code === this.school.schoolCode) {
					this.collect.isCollect = false
				}
				this.getCollectList()
			})
		},

		goSchoolDiff() {
			const routeData = this.$router.push({
				path: '/schoolDiff',
				query: {
					code: this.school.schoolCode
				}
			})
			// window.open(routeData.href, '_blank')
		},
	},
}
</script>

<style lang="stylus" scoped>
.page
	font-size: 15px;
	background: #F9F9F9;
	&-bd
		width BodyMaxWidth
		margin 10px auto 60px auto
		uiBlock();
		padding 20px 22px 39px 22px
		box-sizing border-box
.page-header
	width: 100%;
	min-height: 260px;
	position relative
	&__banner
		width 100%
		height 100%
		object-fit: cover;
		position absolute
		top 0
		left 0
	&__bd
		position: relative;
		padding: 47px 17px 44px 17px;
		z-index: 1;
		width: BodyMaxWidth;
		margin: 0 auto;
		box-sizing: border-box;

.page-name
	display inline-flex
	margin 0px 28px 0 0
	font-size: 28px;
	font-weight: normal;
	color: #fff;
	line-height: 58px;
	text-shadow: 0px 4px 4px rgba(121, 68, 2, 0.1);

.article-content {
	margin 48px 0 48px 15px
  font-size: 16px;
  font-weight: 400;
  color: #333;
  line-height: 30px;
}
.ui-tabs /deep/
	.el-tabs__item + .el-tabs__item
		margin-left 40px

.school-tag
	display inline-flex
	margin-right 10px
	padding 0 13px
	height: 28px;
	background: rgba(8, 8, 8, 0.2);
	border-radius: 6px;
	font-size: 14px;
	color: #FAFAFA;
	line-height: 28px;
	cursor pointer
.school-logo
	width 168px
	height 168px
	border-radius 4px
	margin-right 24px
	flex-shrink 0
	background #fff
	padding 15px
	box-sizing border-box
	object-fit cover
.school-address
	font-size: 14px;
	color: #FAFAFA;
	display block
	// margin-top 18px
.detail
	&-name
		margin 0 0 47px
		font-size: 50px;
		// font-family: Alimama FangYuanTi VF;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 48px;
		text-shadow: 0px 4px 4px rgba(121,68,2,0.1);

	&-tag
		display inline-flex
		align-items center
		padding 0 13px
		height: 28px;
		border: 1px solid #F9F9F9;
		box-sizing border-box
		border-radius: 20px;
		font-size: 14px;
		font-weight: 400;
		color: #FAFAFA;
		margin-right 12px
		margin-bottom 18px
.collect
	display flex
	align-items center
	color PrimaryColor
	margin-right 28px
	cursor pointer
	&-icon
		font-size 28px
		margin-right 8px
	&-text
		font-size: 18px;
		font-weight: 400;

</style>
